import React,{Component} from 'react';
import {Modal,Table,Divider,message,Button} from 'antd';
import { Form, Input,Upload} from 'antd';
import http from '../api/http';
import './css/bases.css';
import './css/component.css';
import uploadimg from '../images/uploadimg.png';
const { confirm } = Modal;
class Advertisement extends Component {
    constructor(props){
        super(props);
        this.state = {
            pageInfo:[],
            loading:true,
            visible:false,
            addUpdate:true,
            fileList:[],
            formInfo:[]
        };
    }
    componentDidMount() {
        this.selectInfo()
    };
    selectInfo=() =>{
        http.get('advertisement','ADMINUSER').then(res =>{
            if(res.code === 0){
                this.setState({pageInfo:res.data,loading:false})
            }
        })
    }
    showModal=()=>{
        this.setState({fileList:[],addUpdate:false,visible:true,formInfo:[]})
    }
    updataTwo=(item)=>{
        this.setState({fileList:[],addUpdate:true,visible:true,formInfo:item})
    }
    delectAdvertising = (item)=>{
        confirm({
            title: '是否真的要删除',content: '数据一旦删除，将不可恢复，如需恢复，请重新上传',okText: '删除',okType: 'danger', cancelText: '取消',
            onOk() {
              console.log('OK');
              message.success('删除成功')
            },
            onCancel() {
              console.log('Cancel');
            },
        });
    }
    // 表单提交
    handleSubmit = e => {
        e.preventDefault();
        this.props.form.validateFields((err, values) => {
          if (!err) {
            console.log('内容', values);
          }
        });
        // 图片上传
        const fileList = this.state.fileList;
        const formData = new FormData();
        fileList.forEach(file => {
          formData.append('formData', file);
        });
        console.log(fileList)
    };
    delectFormImg=()=>{
        var formInfo= this.state.formInfo;
        formInfo.imgaddress = ''
        this.setState({formInfo:formInfo})
    }
    handleCancel = ()=>{
        this.setState({visible:false})
    }
    render() {
        var that = this;
        const columns = [
            {title: '图片',dataIndex: 'imgaddress', key:'imgaddress',
                render: (item) => <img style={{height:60,width:100}} src={item} alt=''></img>,
            },
            {title: '标题',dataIndex: 'head', key:'head'},
            {title: '副标题',dataIndex: 'subhead', key:'subhead'},
            {title: '页面跳转',dataIndex: 'target', key:'target'},
            {title: '介绍',dataIndex: 'introduce',sorter: (a, b) => a.head.length - b.head.length,},
            {title: '操作',
                render: (item) => <span>
                    <Button className='mgr5' type="primary" size='small' onClick={that.updataTwo.bind(that,item)}>修改</Button>
                    <Divider type="vertical" />
                    <Button className='mgr5' type="link" size='small' onClick={that.delectAdvertising.bind(that,item.id)}>删除</Button>
                </span>
            },
        ];
        const formItemLayout = {labelCol: { span: 6 },wrapperCol: { span: 14 }};
        const { getFieldDecorator } = this.props.form;
        const props = {
            onRemove: file => {
              this.setState(state => {
                const index = state.fileList.indexOf(file);
                const newFileList = state.fileList.slice();
                newFileList.splice(index, 1);
                return {
                  fileList: newFileList,
                };
              });
            },
            beforeUpload: file => {
                this.setState(state => ({
                    fileList: [...state.fileList, file],
                }));
                return false;
            },
        };
        return (
            <div>
                <div className='flexsb'>广告列表<Button type="primary" onClick={this.showModal}>添加内容</Button></div>
                <Modal title="Basic Modal" visible={this.state.visible} onOk={this.handleSubmit} onCancel={this.handleCancel} destroyOnClose='true' okText="修改" cancelText="取消">
                    <Form {...formItemLayout}>
                        <Form.Item label="标题标题">
                            {getFieldDecorator('head', {initialValue:this.state.formInfo.head,rules: [{ required: true,max:10, message: '标题需要1-10个字段'}],
                            })(<Input placeholder="head"/>)}
                        </Form.Item>
                        <Form.Item label="副标题">
                            {getFieldDecorator('subhead', {initialValue:this.state.formInfo.subhead,rules: [{ required: true, message: '请输入副标题'}],
                            })(
                            <Input placeholder="请输入副标题" />)}
                        </Form.Item>
                        <Form.Item label="跳转">
                            {getFieldDecorator('target', {initialValue:this.state.formInfo.target,rules: [{ required: true, message: '请输入跳转'}],
                            })(
                            <Input placeholder="请输入跳转" />)}
                        </Form.Item>
                        <Form.Item label="介绍">
                            {getFieldDecorator('intoduce', {initialValue:this.state.formInfo.introduce,rules: [{ required: true, message: '请输入介绍'}],
                            })(
                            <Input placeholder="请输入介绍" />)}
                        </Form.Item>
                        
                        {this.state.addUpdate ?(
                            <Form.Item label="图片上传">
                                {!this.state.formInfo.imgaddress?(
                                    <Upload {...props}>
                                        {this.state.fileList.length < 1 &&
                                            <img style={{width:100}} src={uploadimg} alt=''></img>
                                        }
                                    </Upload>
                                ):(
                                   <div className='upload-outsild' disabled>
                                        <img style={{width:100}} src={this.state.formInfo.imgaddress} disabled alt=''></img>
                                        <div className='delect-img flexct' onClick={this.delectFormImg}>x</div>
                                    </div> 
                                )}
                            </Form.Item>
                        ):(
                            <Form.Item label="图片上传">
                                <Upload {...props}>
                                    {this.state.fileList.length < 1 &&
                                        <img style={{width:100}} src={uploadimg} alt=''></img>
                                    }
                                </Upload>
                            </Form.Item>
                        )}
                    </Form>
                </Modal>
                <Table  rowKey={record => record.id} columns={columns} dataSource={this.state.pageInfo} loading={this.state.loading}/>
            </div>
        );
    }
}
const Advertise = Form.create({ name: 'normal_auth' })(Advertisement);
export default Advertise;